<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                    :index="item[pathKey]"
                    @click="open(item)"
                    :key="item[labelKey]"
                    :class="{'is-active':vaildActive(item,'item')}">
        <template v-if="isHaveImg(item)">
          <img class="menu-f-img" v-show="vaildActive(item,'item')" :src="require(`@/img/menu/${item.code}_se.png`)">
          <img class="menu-f-img" v-show="!vaildActive(item,'item')" :src="require(`@/img/menu/${item.code}.png`)">
        </template>
        <template v-else>
          <img class="menu-f-img" v-show="vaildActive(item,'item')" :src="require('@/img/menu/demo_se.png')">
          <img class="menu-f-img" v-show="!vaildActive(item,'item')" :src="require('@/img/menu/demo.png')">
        </template>
        <div class="menu-f-page menu-page-f" slot="title">
          <div class="menu-card" :class="{'is-menu-sel':vaildActive(item,'item')}">
            <div class="title f-title">{{generateTitle(item)}}</div>
          </div>
        </div>
      </el-menu-item>
      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                  :index="item[pathKey]"
                  :key="item[labelKey]+''">
        <div class="menu-f-page" slot="title">
          <div class="menu-card" :class="{'is-menu-sel':vaildActive(item,'item')}">
            <template v-if="isHaveImg(item)">
              <img v-show="item[pathKey] == isActiveMenuF || item.id == isActiveMenuFid" :src="require(`@/img/menu/${item.code}_se.png`)">
              <img v-show="item[pathKey] != isActiveMenuF && item.id != isActiveMenuFid" :src="require(`@/img/menu/${item.code}.png`)">
            </template>
            <template v-else>
              <img v-show="item[pathKey] == isActiveMenuF || item.id == isActiveMenuFid" :src="require('@/img/menu/demo_se.png')">
              <img v-show="item[pathKey] != isActiveMenuF && item.id != isActiveMenuFid" :src="require('@/img/menu/demo.png')">
            </template>
            <div class="title">{{generateTitle(item)}}</div>
          </div>
        </div>
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item :index="child[pathKey]"
                        @click="open(child)"
                        :class="{'is-active':vaildActive(child,'child')}"
                        v-if="validatenull(child[childrenKey])"
                        :key="child[labelKey]">
            <div class="menu-c-page" slot="title">
              <div class="menu-card" :class="{'is-menu-c-sel':vaildActive(child,'child')}">
                <div class="title">{{generateTitle(child)}}</div>
              </div>
              <div class="line-s">
                <div class="c-line-e" v-if="cindex == item.children.length-1"></div>
                <div class="c-line" v-else></div>
                <div class="c-spot" :class="{'c-spot-1':vaildActive(child,'child')}"></div>
              </div>
            </div>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="cindex"
                        :props="props"
                        :screen="screen"
                        :collapse="collapse"></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
  import {mapGetters} from "vuex";
  import {isURL, validatenull} from "@/util/validate";
  import config from "./config.js";

  export default {
    name: "sidebarItem",
    data() {
      return {
        config: config,
        isActiveMenuF: "",
        isActiveMenuId: "",
        isActiveMenuFid: "",
      };
    },
    props: {
      menu: {
        type: Array
      },
      screen: {
        type: Number
      },
      first: {
        type: Boolean,
        default: false
      },
      props: {
        type: Object,
        default: () => {
          return {};
        }
      },
      collapse: {
        type: Boolean
      }
    },
    created() {
    },
    mounted() {},
    computed: {
      ...mapGetters(["roles","isCollapse","nowPath"]),
      labelKey() {
        return this.props.label || this.config.propsDefault.label;
      },
      pathKey() {
        return this.props.path || this.config.propsDefault.path;
      },
      iconKey() {
        return this.props.icon || this.config.propsDefault.icon;
      },
      childrenKey() {
        return this.props.children || this.config.propsDefault.children;
      },
      isOpenKey() {
        return this.props.isOpen || this.config.propsDefault.isOpen;
      },
      nowTagValue() {
        return this.$router.$avueRouter.getValue(this.$route);
      }
    },
    watch: {
      isCollapse(val){
        console.log("isCollapse",val)
      },
      nowPath(val){
        // console.log("nowPath",val)
        let path=val.path
        this.isActiveMenuF=path.split("/")[1]
        this.isActiveMenuFid=""
      },
    },
    methods: {
      generateTitle(item) {
        return this.$router.$avueRouter.generateTitle(
          item[this.labelKey],
          (item.meta || {}).i18n
        );
      },
      vaildActive(item,type) {
        // console.log("vaildActive",item)
        if (this.validIsOpen(item)) {
          return false;
        }
        const groupFlag = (item["group"] || []).some(ele =>
          this.$route.path.includes(ele)
        );
        // return this.nowTagValue === item[this.pathKey] || groupFlag;
        let isActive = this.nowTagValue === item[this.pathKey] || groupFlag;
        if(type=="item"){
          if(isActive){
            this.isActiveMenuF=item.path
          }
        }else{
          if(isActive){
            this.isActiveMenuFid=item.parentId
          }
        }
        return isActive;
      },
      vaildRoles(item) {
        item.meta = item.meta || {};
        return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
      },
      validatenull(val) {
        return validatenull(val);
      },
      validIsOpen(item) {
        if (item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
          return true;
        }
      },
      open(item) {
        // console.log("open-item",item)
        if(item.path=="/wel/index/index"){//首页

          this.$router.push({
            path: this.$router.$avueRouter.getPath({
              name: "首页",
              src: "/wel/index"
            }, {i18n: "dashboard"}),
            query: {}
          });

        }else{
          if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
          if (this.validIsOpen(item)) {
            window.open(item[this.pathKey]);
          } else {
            this.$router.$avueRouter.group = item.group;
            this.$router.$avueRouter.meta = item.meta;
            this.$router.push({
              path: this.$router.$avueRouter.getPath({
                name: item[this.labelKey],
                src: item[this.pathKey]
              }, item.meta),
              query: item.query
            });
          }
        }
      },


      menuSelect(index, indexPath){
        // console.log("sidebarItem: menuSelect",index, indexPath,"isCollapse",this.isCollapse)
        // this.isActiveMenuF=indexPath[0]
        // this.isActiveMenuFid=""
      },
      // 判断是否有对应图片
      isHaveImg(item){
        let arr=[
          {code:"log",name:"日志管理"},
          {code:"base",name:"基础配置"},
          {code:"authority",name:"权限管理"},
          {code:"system",name:"系统管理"},
          {code:"companyInformation",name:"单位信息"},
          {code:"ItemInformation",name:"物品信息"},
          {code:"assetWarehousing",name:"资产出入库"},
          {code:"consumableWarehousing",name:"耗材出入库"},
          {code:"assets",name:"资产管理"},
          {code:"consumableManagement",name:"耗材管理"},
          {code:"accountManagement",name:"账号管理"},
        ]
        let haveImg=false
        for (let i = 0; i < arr.length; i++) {
          if(arr[i].code==item.code){
            haveImg=true
          }
        }
        return haveImg;
      },

      eltooltipNoneFun(){
        let dem=document.getElementsByClassName("menu-page-f")
        if(dem.length>0){
          if(dem[0].parentElement.parentElement.className=="el-tooltip__popper is-dark"){
            document.getElementsByClassName("menu-page-f")[0].parentElement.parentElement.style.display="none !important"
          }
        }
      },



    }
  };
</script>


<style lang="scss" scoped>
.avue-sidebar .el-menu-item.is-active, .avue-sidebar .el-submenu__title.is-active{
  // background: rgba(58,146,249,0.85);
  background-color: #ffffff !important;
  border-radius: 8px;
}




.menu-f-img{
  width: 24px;
  position: absolute;
  top: 15px;
  left: 21px;
}
.menu-f-page{
  height: 56px;
  // width: 100%;
  width: 200px;
  display: flex;
  align-items: center;
  position: relative;
  .menu-card{
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 5;
    // background-color: #ffffff;
  }
  img{
    // margin-left: 20px;
    width: 22px;
    // height: 28px;
    background-color: #ffffff;
  }
  .title{
    height: 30px;
    line-height: 30px;
    margin-left: 18px;
    margin-bottom: 0;
  }
  .f-title{
    margin-left: 42px;
    color: #636c86;
    font-size: 14px;
  }
  .is-menu-sel{
    .f-title{
      color: #2878E8;
    }
  }
}
.menu-c-page{
  height: 50px;
  width: 200px;
  display: flex;
  align-items: center;
  position: relative;
  .menu-card{
    height: 44px;
    width: 200px;
    display: flex;
    align-items: center;
  }
  img{
    // margin-left: 20px;
    width: 22px;
    // height: 28px;
    background-color: #ffffff;
  }
  .title{
    height: 30px;
    line-height: 30px;
    margin-left: 43px;
    margin-bottom: 0;
  }

  .line-s{
    height: 100%;
    width: 23px;
    position: absolute;
    left: 0;
    .c-line{
      width: 0px;
      height: 48px;
      border-left: dashed 1px #DCE0E4;
      margin: 0 auto;
    }
    .c-line-e{
      width: 0px;
      height: 30px;
      border-left: dashed 1px #DCE0E4;
      margin: 0 auto;
    }
    .c-spot{
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #DCE0E4;
      position: absolute;
      left: 8px;
      top: 22px;
    }
    .c-spot-1{
      background-color: #2878E8;
    }
  }

}
// .is-menu-sel{
//   color: chocolate;
// }
.is-menu-c-sel{
  background-color: #f1f6f8;
  border-radius: 8px;
}
</style>










<style lang="scss">
.avue-sidebar .menu-wrapper .el-submenu__title i{
  font-weight: bolder;
  font-size: 14px;
  // color: red;
  // color: blue;
  color: #636c86;
}
.avue-sidebar .el-submenu .el-menu-item{
  padding: 0px 20px;
  padding-left: 20px !important;
}

.is-active .el-submenu__title .menu-f-page .title{
  // color: chocolate;
  color: #2878e8;
}
.is-active .el-submenu__title .el-icon-arrow-down{
  // color: chocolate;
  color: #2878e8 !important;
}
.avue-sidebar .el-menu .el-menu-item:hover{
  // background-color: #f1f6f8 !important;
  // background-color: rgba($color: #f1f6f8, $alpha: 0) !important;
  background-color: #ffffff !important;
}
.avue-sidebar .el-menu .el-submenu .el-submenu__title:hover{
  // background-color: #f1f6f8 !important;
  // background-color: #2878e8 !important;
  // background-color: rgba($color: #f1f6f8, $alpha: 0) !important;
  background-color: #ffffff !important;
}

.avue-sidebar .el-submenu .is-active:before{
  width: 0 !important;
}
.el-menu--popup .el-menu-item.is-active:before{
  width: 0 !important;
}
.el-menu--popup .el-menu-item:hover{
  // background-color: #f1f6f8 !important;
  // background-color: rgba($color: #f1f6f8, $alpha: 0) !important;
  background-color: #ffffff !important;
}
.avue-sidebar .el-menu-item.is-active:before{
  width: 0 !important;
}


// .el-tooltip__popper{
//   // background-color: rgba(0,0,0,0.6) !important;
//   color: #2878e8;
//   background-color: #ffffff !important;
//   // box-shadow: 2px 2px 5px #f1f6f8;
//   // box-shadow: 0 2px 12px rgba(0 0 0 0.1);
//   // -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
//   box-shadow: 0 2px 12px 0 #0000001a;
// }
// .el-tooltip__popper[x-placement^="right"] .popper__arrow{
//   // border-right-color: rgba(0,0,0,0.4);
//   border-right-color: #0000001a;
// }
// .el-tooltip__popper[x-placement^="right"] .popper__arrow:after{
//   // border-right-color: rgba(0,0,0,0.4);
//   border-right-color: #0000001a;
// }
</style>
